<script scope setup>
// import axios from "axios";
import {ElMessage} from "element-plus";

import {PostService} from "@/api/coupon";
import {CouponTakeService} from "@/api/coupon";
import {ref} from "vue";
const coupon=ref({
})
const state=ref(true)
const takeCategory = async ()=>{
  let result = await CouponTakeService(coupon.value)
  ElMessage.success(result.msg ? result.msg:'领取成功')
  const element = document.getElementById("take")
  element.style.backgroundColor='grey'
  element.style.borderTopRightRadius = "10px";
  element.style.borderBottomRightRadius = "10px";
  element.innerHTML="已领取"
  state.value= false
}
const setCategory = async ()=>{
  let result = await PostService()
  coupon.value = result.data
}
setCategory()

</script>
<template>
  <div class="list"  v-if="coupon!==null">
    <div class="item">
      <div class="left">
        <div class="block">
          <el-row >
            <el-col :span="11">
              <p class="first"><span>￥</span><span>{{coupon.amount}}元</span></p>
              <p class="second"><span>满{{coupon.startAmount}}可用,还剩{{coupon.number}}张</span></p>
            </el-col>
            <el-col :span="13">
              <p class="third"><span>{{coupon.name}}</span></p>
              <p class="fourth">有效期：{{coupon.validDate}}天</p>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="right"><p id="take"   @click="takeCategory()">立即领取</p></div>
    </div>
  </div>
</template>



<style scoped>
.list{
  margin-top: -60px;
  margin-right: 10px;

  .item{
    overflow: hidden;
    //margin:10px 20px;
    .left{
      float: left;
    }
    .left{
      position: relative;
      width: 200px;
      height: 100px;
      background-image:
          radial-gradient(
              circle at 1px 8px,
              transparent 6px,
              #fff 6px,
              #fff 0px);
      background-size: 500px 18px;
      background-position: 0 0, 500px 0;
      background-repeat-x: no-repeat;
      .block{
        margin:15px;
        .second{
          margin-top: -20px;
          font-size: 8px;
          color:#888;
        }
        .first{
          color:#f60d0b;
          span:nth-child(1){
            font-size:16px;
          }
          span:nth-child(2){
            font-size:18px;
          }
        }
        .third{
          color:#000;
          font-size:13px;
        }
        .fourth{
          margin-left: 20px;
          margin-top: -20px;
          font-size: 8px;
          color:mediumvioletred;
        }
      }
    }
    .right{
      position: relative;
      width:100px;
      height:100px;
      border-radius: 0 10px 10px 0px;
      background-image:
          radial-gradient(
              circle at 199px 8px,
              transparent 6px,
              #409EFF 6px,
              #409EFF 0px);
      background-size: 200px 18px;
      background-repeat-x: no-repeat;
      margin-left:200px;
      p{
        width:100px;
        height:100%;
        margin:0 auto;
        color:#fff;
        line-height:100px;
        text-align:center;
        font-size:18px;
      }
    }
  }
}
</style>